<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="登录地址">
                <el-input v-model="menu.ipAddr" placeholder="请输入登录地址"></el-input>
            </el-form-item>
            
            <el-form-item label="用户名称">
                <el-input v-model="menu.userName" placeholder="请输入用户名称"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-select v-model="menu.status" placeholder="请选择状态">
                    <el-option label="成功" value="0"></el-option>
                    <el-option label="失败" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-date-picker v-model="menu.loginTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-button type="primary" @click="search" style="margin-bottom: 20px;">
                <el-icon style="margin-right: 10px;" ><Search /></el-icon>搜索
            </el-button>
        </el-form>
        
        <el-button type="primary" v-perm:management:salesorder:insert="insert">添加</el-button>
        <el-button type="primary" v-perm:management:salesorder:update="update">修改</el-button>
        <el-button type="primary" v-perm:management:salesorder:remove="remove">删除</el-button>
        <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="orderNo" label="访问编号" width="150"></el-table-column>
            <el-table-column prop="userName" label="用户名称" width="150"></el-table-column>
            <el-table-column prop="browser" label="浏览器" width="150"></el-table-column>
            <el-table-column prop="loginLocation" label="登录地点" width="150"></el-table-column>
            <el-table-column prop="ipAddr" label="登录地址" width="150"></el-table-column>
            <el-table-column prop="os" label="操作系统" width="150"></el-table-column>
            <el-table-column prop="logstatus" label="登录状态" width="100">
                <template v-slot="scope">
                    <span v-if="scope.row.status == 0">成功</span>
                    <span v-if="scope.row.status == 1">失败</span>
                </template>
            </el-table-column>
            <el-table-column prop="msg" label="操作信息" width="150"></el-table-column>
            <el-table-column prop="loginTime" label="登录日期" width="150"></el-table-column>
            
        </el-table>
        
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" style="width: 1250px;">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>

        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="page.current" v-model:page-size="page.size"
                :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>


    </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'
import request from '@/api/request'
let menu = ref({});
const data = ref({})
const visible = ref(false)
const title = ref('')


//下拉框
let status = [
    {
        label: "成功",
        value: "0"
    },
    {
        label: "失败",
        value: "1"
    }
]


//分页参数
let page = ref({

})

let search = () => {

    request({
        url: '/slm/login/find',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            ...menu.value

        }
        // ,headers: "Content-Type: application/json"
    }).then(resp => {
        console.log(resp.data)
        page.value = resp.data
    })
}


search();

const insert = (p) => {
    visible.value = true
    title.value = p.cname
    router.push(p.path)
}

const update = (p) => {
    visible.value = true
    title.value = p.cname
    router.push(p.path)
}

// 初始化状态（设置默认值）
const ipAddr = ref('')
const userName = ref('')
const loginTime = ref('')






const selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};

const bulkDelete = () => {
    if (confirm("确定要删除选中的订单吗？")) {
        salesorder.value = salesorder.value.filter(order => !selectedRows.value.includes(order));
        selectedRows.value = []; // 清空选中项
    }
};

// 单行删除方法
const deleteSingle = (row) => {
    if (confirm("确定要删除该订单吗？")) {
        salesorder.value = salesorder.value.filter(order => order.orderNo !== row.orderNo);
    }
};
</script>

<style scoped>
.el-select {
    width: 150px;
}
</style>
